<template>
  <div id="Task">
    <Filters
      block
      :form="searchForm"
      :filterData="filterData"
      @confirm="changePage(1)"
    />
    <div class="container">
      <DataTable
        rowKey="taskId"
        :btns="btns"
        :tableData="Data"
        :tableColumn="tableColumn"
        :pageConfig="pageConfig"
        @refresh="getList"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';

@Component
export default class Task extends Vue {
  searchForm: any = {
    taskType: undefined,
    date: [],
    taskName: '',
    itemsName: ''
  };
  btns: any[] = [
    {
      label: '新增任务',
      icon: 'add',
      callback: () => this.$router.push('/allot/task/edit')
    }
  ];
  get filterData () {
    return {
      taskType: {
        label: '任务类型',
        type: 'select',
        template: {
          placeholder: '请选择状态',
          clearable: true,
          filterable: true,
          options: [
            {
              label: '全部',
              value: ''
            },
            {
              label: '定期任务',
              value: 'DS'
            },
            {
              label: '临时任务',
              value: 'LS'
            }
          ]
        }
      },
      date: {
        label: '完成时限',
        type: 'daterange',
        template: {
          clearable: true
        }
      },
      taskName: {
        label: '任务名称',
        type: 'input',
        template: {
          placeholder: '任务名称',
          clearable: true
        }
      },
      itemsName: {
        label: '项目名称',
        type: 'input',
        template: {
          placeholder: '项目名称',
          clearable: true
        }
      }
    };
  }
  Data: any[] = [];
  tableColumn: any = {
    taskName: {
      label: '任务名称',
      minWidth: 120
    },
    countingTaskExplain: {
      label: '任务说明',
      minWidth: 120,
      hidden: true
    },
    taskType: {
      label: '任务类型',
      minWidth: 100,
      map: {
        'DS': '定期任务',
        'LS': '临时任务'
      }
    },
    itemsName: {
      label: '项目',
      minWidth: 120
    },
    countingTaskState: {
      label: '是否启用',
      minWidth: 170,
      type: 'switch',
      callback: (row: any) => this.changeStatus(row)
    },
    action: {
      label: '操作',
      width: 230,
      template: [
        {
          tag: 'router-link',
          text: '编辑',
          path: '/allot/task/edit',
          query: {
            taskId: ''
          }
        },
        {
            tag: 'router-link',
            text: '任务监控',
            path: '/allot/task/taskMoniter',
            query: {
                isMonitor: true,
                taskId: ''
            }
        }
      ]
    }
  };
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  };

  init () {
    this.getList()
  }
  getSearchForm () {
    let { searchForm } = this;
    let { current, pageSize } = this.pageConfig
    let form = Object.assign({ page: current, size: pageSize }, searchForm);
    let [ startTime, endTime ] = this.$util.formatDate(form.date)
    Object.assign(form, {
        startTime,
        endTime
    });
    delete form.date
    return form;
  }
  // 任务列表
  getList () {
    let data = this.getSearchForm()
    this.$api.countingTaskListFetch(data).then((res: any) => {
      res.data.records.map((item:any) => {
        if (item.countingTaskState == 1) {
          item.countingTaskState = true
        } else {
          item.countingTaskState = false
        }
      })

      this.Data = res.data.records;
      this.pageConfig.total = res.data.total;
      if (!this.Data.length && this.pageConfig.current > 1) {
        --this.pageConfig.current;
        this.getList();
      }
    });
  }
  changePage (val: number) {
    this.pageConfig.current = val;
    this.getList();
  }
  searchHandle () {
    this.pageConfig.current = 1;
    this.getList();
  }
  // 状态禁用、启用
  changeStatus (row: any) {
    let taskId = row.taskId;
    let countingTaskState = row.countingTaskState ? 1 : 0
    this.$api.countingTaskDowFetch({ taskId, countingTaskState }).then(() => {
      this.$message.success(`${countingTaskState ? '启用' : '禁用'}成功`);
      this.getList();
    })
  }
}
</script>

<style lang="scss">
</style>
